<template>
    <div v-if="tkIsShow">
        <div class="zhezhao"></div>
        <div class="tankuang">
            <div class="tk_title">{{ title }}</div>
            <img src="../assets/icon-close.png" class="tk_close" @click="closeTk">
            <div class="tk_content">
                <div class="tk_form">
                    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item
                            v-for="(item, index) in spec"
                            :label="'规格名称' + (index+1)"
                            :key="item.key"
                            :prop="'items.' + index + '.value'"
                            :rules="{
                            required: true, message: '规格名称不能为空', trigger: 'blur'
                            }"
                        >
                            <el-input v-model="item.specStr" size="small" style="width: 70%;"></el-input>
                            <div class="icon-input-box">
                              <img src="../assets/icon-add.png" class="icon-input" v-if="(index+1)==1" @click="addSpec"/>
                              <img src="../assets/icon-minus.png" class="icon-input" v-if="(index+1)!=1" @click="minusSpec(item)"/>
                            </div>
                            <div v-for="(s, sindex) in item.specArry">
                              <el-input v-model="item.specArry[sindex]" placeholder="请输入选项" size="small" style="width: 70%;"></el-input>
                              <div class="icon-input-box">
                                <img src="../assets/icon-add.png" class="icon-input" v-if="(sindex+1)==1" @click="addSpecLabel(index)"/>
                                <img src="../assets/icon-minus.png" class="icon-input" v-if="(sindex+1)!=1" @click="minusSpecLabel(index,sindex)"/>
                              </div>
                            </div>
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')" size="small">保存</el-button>
                            <el-button @click="resetForm('ruleForm')" size="small">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
        tkIsShow:false,
        title:"",
        spuId:0,
        spec:[{
          specStr:'',
          specArry:['']
        }],
        form:{},
        rules: {
            
        }
    };
  },
  methods: {
    __init(spuId) {
      this.spuId=spuId;
      this.form={
        id:spuId,
        spec_template:''
      }
      var url="manager/getGoodsSpecById";
      var params={
        id: spuId
      }
      this.$post(url, params).then((res) => {
        console.log(res)
        if (res.code === 0) {
          if(res.data!=null){
            this.spec=[];
            for (const [key, values] of Object.entries(res.data)) {
            const gjson={
              "specStr":key,
              "specArry":values
            }
            this.spec.push(gjson);
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      });
    },
    submitForm(formName) {
        //this.$refs[formName].validate((valid) => {
          //if (valid) {
            var specsArray=this.spec;
            const transformedObject = {};
            specsArray.forEach(spec => {
              transformedObject[spec.specStr] = spec.specArry;
            });
            console.log(JSON.stringify(transformedObject))
            this.form.spec_template=JSON.stringify(transformedObject);
            var url="manager/updateGoodsSpec";
            var params={
                ...this.form
            }
            this.$post(url, params).then((res) => {
                console.log(res)
                if (res.code === 0) {
                    this.$message.success(res.msg)
                    this.closeTk();
                } else {
                    this.$message.error(res.msg)
                }
            });
          // } else {
          //   console.log('error submit!!');
          //   return false;
          // }
        //});
    },
    resetForm(formName) {
        //this.$refs[formName].resetFields();
        
    },
    closeTk(){
        this.tkIsShow = false;
        this.$emit("close");
    },
    addSpec(){
      this.spec.push({
        specStr:'',
        specArry:['']
      });
    },
    minusSpec(item){
      var index = this.spec.indexOf(item)
        if (index !== -1) {
          this.spec.splice(index, 1)
        }
    },
    addSpecLabel(index){
      this.spec[index].specArry.push('')
    },
    minusSpecLabel(index1,index2){
      this.spec[index1].specArry.splice(index2, 1)
    }
  }
}
</script>
<style scoped lang="scss">
  .zhezhao{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    top: 0;
    left: 0;
    z-index: 200;
  }
  .tankuang{
    position: fixed;
    width: 30%;
    background-color: #fff;
    top: 5%;
    left: 35%;
    z-index: 201;
    height: 90%;
    border-radius: 5px;
  }
  .tk_title{
    font-size: 17px;
    height: 25px;
    line-height: 25px;
    margin: 15px 0;
  }
  .tk_content{
    width: 100%;
    height: calc(100% - 100px);
    overflow-y: auto;
  }
  .tk_form{
    width: 80%;
    margin-left: 10%;
    height: 100%;
  }
  .tk_close{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 18px;
    right: 20px;
  }
  .icon-input-box{
    display: inline-block;
    width: 30%;
    height: 40px;
    vertical-align: top;
  }
  .icon-input{
    height: 30px;
    margin-top: 5px;
  }
  ::v-deep .el-select>.el-input{
    width: 310px !important;
  }
</style>